<template>
    <div style="text-algin:left;"> 
        <!-- <h5>【主题】{{SubjectInfo.ShortName}}</h5> -->
        <el-menu 
        default-active="2" :router="true"
        class="el-menu-vertical-demo"
        @open="handleOpen" :collapse="iscollapse"
        @close="handleClose">
            <template v-if="list.length>0">
                <template v-for="item in list">
                    <template v-if="item.childnodes && item.childnodes.length>0">
                        <el-submenu :index="item.id">
                            <template>
                                <template slot="title">
                                    <i class="el-icon-arrow-down"  :style="attributeid==item.id?'font-weight: bold;':''"></i>
                                    <span :style="attributeid==item.id?'font-weight: bold;':''">{{item.nodename }}</span>
                                </template>
                            </template>
                            <el-menu-item-group>
                                <el-menu-item :index="childItem.id" :route="childItem.url" v-for="childItem in item.childnodes">{{childItem.nodename}}</el-menu-item>
                            </el-menu-item-group>
                        </el-submenu>
                    </template>
                    <template v-else>
                        <el-menu-item :index="item.id" :route="item.url">
                            <i class="el-icon-news"  :style="attributeid==item.id?'font-weight: bold;':''"></i>
                            <span slot="title" :style="attributeid==item.id?'font-weight: bold;':''">{{item.nodename}}</span>
                        </el-menu-item>
                    </template>
                </template>
            </template>
            <template v-else>
                <el-alert
                    title="不要紧张，我只是没有数据"
                    type="warning" v-if="isloading">
                </el-alert>
                <el-alert
                    title="等待中..."
                    type="info" v-else>
                </el-alert>
            </template>
        </el-menu>
    </div>
</template>

<script>
import { page } from "../../data/base_data";
import { baseUrl, baseImgPath } from "../../config/env";
export default {
  data() {
    return {
      isloading: true,
      baseDate: {
        curpage: {}
      },
      SubjectInfo: { ShortName: "主题" },
      list: [
        // {id:"1", nodename:"面向对象",icon:"el-icon-news", childnodes:[
        //      {id:"11", nodename:"继承",url:"/contentshow/1/1"},
        //      {id:"12", nodename:"封装",url:"/contentshow/1/2"},
        //      {id:"13", nodename:"多态",url:"/contentshow/1/3"}]},
        // {id:"2", nodename:"基本语法",icon:"el-icon-news", childnodes:[
        //      {id:"21", nodename:"常量",url:"/contentshow/1/4"},
        //      {id:"22", nodename:"类",url:"/contentshow/1/5"},
        //      {id:"23", nodename:"属性",url:"/contentshow/1/6"}]},
      ]
    };
  },
  props: ["subjectid", "attributeid", "page", "iscollapse"],
  watch: {
    $route(to, from) {
      this.loadSubjectInfo();
    }
  },
  methods: {
    loadSubjectInfo: function() {
      console.log(
        "subject:" + this.subjectid + ";attribute:" + this.attributeid
      );
      var rule = {
        Field: "Id",
        Value: this.subjectid,
        Operate: 3
      };
      this.baseDate.curpage.FilterGroup.Rules = [rule];
      var transFn = function(data) {
        return $.param(data);
      };

      var data = { subjectid: this.subjectid };

      var config = {
        headers: { "Content-Type": "application/json" },
        transformRequest: transFn
      };

      //post数据
      this.$http
        .post(
          baseUrl + "api/Admin/ContrastSubject/Read",
          this.baseDate.curpage,
          config
        )
        .then(
          function(res) {
            if (res.body.Rows.length != 0) {
              this.SubjectInfo = res.body.Rows[0];
              this.loadSubjectAttribute();
            }
          },
          function(res) {
            alert("主题获取失败");
          }
        );
    },
    loadSubjectAttribute: function() {
      var rule = {
        Field: "SubjectID",
        Value: this.subjectid,
        Operate: 3
      };
      this.baseDate.curpage.FilterGroup.Rules = [rule];
      this.baseDate.curpage.PageCondition.PageSize = 100;
      this.list = [];
      var that = this;
      //post数据
      this.$http
        .post(baseUrl + "api/Admin/ContrastAttribute/GetSubjectAttribute", [
          this.subjectid
        ])
        .then(
          function(res) {
            var pnodes = res.body.Rows.where(s => {
              return s.ParentID == 0;
            });
            for (let index = 0; index < pnodes.length; index++) {
              const element = pnodes[index];
              var cnodes = res.body.Rows.where(s => {
                return s.ParentID == element.Id;
              });
              var childnodes = cnodes.select(s => {
                return {
                  id: s.Id.toString(),
                  nodename: s.ShortName,
                  url: "/" + that.page + "/" + that.subjectid + "/" + s.Id
                };
              });
              var node = {
                id: element.Id.toString(),
                nodename: element.ShortName,
                icon: "el-icon-news",
                url: "/" + that.page + "/" + that.subjectid + "/" + element.Id
              };
              if (childnodes.length > 0) {
                node.childnodes = childnodes;
              }
              this.list.push(node);
            }
          },
          function(res) {
            alert("操作数据获取失败");
          }
        );
    },
    handleOpen(key, keyPath) {
      console.log(key, keyPath);
    },
    handleClose(key, keyPath) {
      console.log(key, keyPath);
    }
  },
  mounted() {
    this.baseDate.curpage = page;
    this.loadSubjectInfo();
  }
};
</script>

<style scoped>
.el-menu {
  border-right: 0px;
}
</style>